<template>
    <BasicModal v-bind="$attrs" wrapClassName="form-modal" :destroyOnClose="true"
        :title="props.isUpdate ? '修改' : '新增'" :width="896" :canFullscreen="true" :defaultFullscreen="true"
        @register="registerModal">
        <template #footer>
            <a-button type="primary" @click="onModalConfirm">确认</a-button>
            <a-button>取消</a-button>
        </template>
        <div style="width: 100%; height: 100%; padding: 16px;">
            <ModalContext :modelDetail="{}" ref="modalContextRef" />
        </div>
    </BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BasicModal, useModal } from '@/components/Modal';
import ModalContext from './modal-context.vue';

const [registerModal, { openModal, closeModal }] = useModal();

// 创建modal-context的引用
const modalContextRef = ref(null);

// 定义props
const props = defineProps({
    isUpdate: {
        default: false,
        type: Boolean
    },
    detail: {
        default: () => { },
        type: Object
    }
})

// 暴露openModal方法给父组件
defineExpose({
    openModal
});

const onModalConfirm = () => {
    if (modalContextRef.value) {
        // 验证表单
        modalContextRef.value.validate()
            .then(() => {
                // 获取表单数据
                const formData = modalContextRef.value.modelRef;
                console.log('表单数据:', formData);
                
                // 这里可以处理表单提交逻辑，如调用API等
                
                // 提交成功后关闭模态框
                closeModal();
            })
            .catch(err => {
                console.log('表单验证失败:', err);
            });
    }
}

</script>
<style lang="less" scoped>
@import '/@/design/reference/form.less';

.form-modal {

    :deep(.ant-modal-body) {
        padding: 16px !important;
    }

    :deep(.ant-input-number) {
        width: 100%;
    }

    :deep(.ant-calendar-picker) {
        width: 100%;
    }
}
</style>